<template>
  <el-dialog
    title="用户开户"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="800px"
    class="tenant-dialog">
    <div class="dialog-header">
      <i class="el-icon-question" style="color: #409eff; margin-right: 8px;"></i>
      <span>用户开户</span>
    </div>
    
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px" class="tenant-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名：" prop="userName">
            <el-input v-model="dataForm.userName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="查询密码：" prop="password">
            <el-input v-model="dataForm.password" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系电话：" prop="contactPhone">
            <el-input v-model="dataForm.contactPhone" placeholder="请输入">
              <el-button slot="append" type="primary" size="mini">保存</el-button>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系地址：" prop="contactAddress">
            <el-input v-model="dataForm.contactAddress" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="dataForm.remark" placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合并计量：" prop="isCombined">
            <el-radio-group v-model="dataForm.isCombined">
              <el-radio :label="false">否</el-radio>
              <el-radio :label="true">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-form-item>
        <el-button type="primary" @click="selectArea">选择区域</el-button>
      </el-form-item>
      
      <!-- 房间信息表格 -->
      <div class="room-table-section">
        <el-table
          :data="roomList"
          border
          style="width: 100%;"
          max-height="300">
          <el-table-column prop="roomNumber" label="房间号" align="center"></el-table-column>
          <el-table-column prop="electricMeter" label="电表倍率/水表倍率 (V)" align="center"></el-table-column>
          <el-table-column prop="waterMeter" label="跑电/水次数" align="center"></el-table-column>
          <el-table-column prop="electricUsage" label="仪表类型" align="center"></el-table-column>
          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="removeRoom(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: 0,
        userName: '',
        password: '',
        contactPhone: '',
        contactAddress: '',
        remark: '',
        isCombined: false
      },
      roomList: [],
      dataRule: {
        userName: [
          { required: true, message: '用户名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '查询密码不能为空', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.roomList = []
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 获取信息
    async getInfo() {
      try {
        const data = await this.$api.tenant_account_info({ id: this.dataForm.id })
        if (data.code === 0) {
          this.dataForm = { ...this.dataForm, ...data.data }
        }
      } catch (error) {
        console.error('获取信息失败:', error)
      }
    },
    // 选择区域
    selectArea() {
      this.$message.info('选择区域功能待实现')
    },
    // 删除房间
    removeRoom(index) {
      this.roomList.splice(index, 1)
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate(async (valid) => {
        if (valid) {
          try {
            const api = this.dataForm.id ? 'tenant_account_update' : 'tenant_account_save'
            await this.$api[api](this.dataForm)
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          } catch (error) {
            this.$message.error('操作失败')
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.tenant-dialog .el-dialog__header {
  padding: 15px 20px;
  border-bottom: 1px solid #e6e6e6;
}

.dialog-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.tenant-form {
  padding: 20px;
}

.tenant-form .el-form-item {
  margin-bottom: 20px;
}

.tenant-form .el-form-item__label {
  font-weight: normal;
  color: #333;
}

.room-table-section {
  margin-top: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.room-table-section .el-table {
  border: none;
}

.dialog-footer {
  padding: 15px 20px;
  border-top: 1px solid #e6e6e6;
  text-align: right;
}

.dialog-footer .el-button {
  margin-left: 10px;
}
</style>

